<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive</title>
    <!-- 响应式布局是一种网页设计方法，使网页能够根据用户设计的屏幕尺寸、分辨率方向等特性自动调整布局和内容，提供一致且优化的用户体验，其核心目标是“一次设计，多端适配”
    核心技术：弹性盒子，网格布局，流式布局等；
    断点设置：根据常见的设备宽度设置断点
        phone < 768px,pad:768~1024px ,pc> 1024px -->

    <!-- 响应式布局的实现方案：1.媒体查询；
                            媒体查询是css3的功能，允许根据设备的特性应用不同的规则样式，是响应式布局的核心技术
                        2.第三方框架Bootstrap；
                            预设样式和组件减少重复编码，缩短项目周期，适配pc、移动端以及主流的浏览器 -->
    <!-- 语法：
    @media 媒体类型 and （媒体特性）{
        样式属性
    }
    其中，@media是媒体查询的声明，媒体类型有screen，print等，省略默认的all，设备特性有min-width，max-height等 -->

    <style>
        /* 举例 */
        @media screen and (min-width:1200px) {
            body {
                background-color: green;
            }
        }
    </style>

</head>
<body>
    
</body>
</html>